<template>
  <div class="home">

    <div class="search-bar">
      <div class="search">
        <i class="iconfont icon-search icon"></i>
        精彩热搜:{{searchSummary}}
      </div>
      <div class="iconfont icon-appstore-fill icon menu"></div>
    </div>
    
     <div class="banners">
      <yd-slider>
        <yd-slider-item v-for='(item, index) of banners' :key='index'>
            <router-link class="banners-item" :to='item.path'>
              <img :src="item.imgUrl" alt="">
            </router-link>
        </yd-slider-item>
      </yd-slider>
    </div>
    
    <div class="main-nav">
      <div class="main-nav-item" v-for='(item, index) of navs' :key='index' >
        <div class="nav-icon">
          <i  :class='[item.icon, "iconfont"]'></i>
        </div>
        <h1 class="nav-label">
          {{item.label}}
        </h1>
      </div>
    </div>

    <div class="news">
      <router-link class='news-content' :to='news.path'>
            <i :class="['iconfont', 'type', newsType]"></i>
          <p>
            {{news.text}}
          </p>
      </router-link>
    </div>
    

    <!-- 推荐 -->
    <div class="level recommend">
      <div class="level-header">
        <h1 class="level-title">
            专属推荐
        </h1>
        <p class="level-summary">
          根据您最近读书习惯推荐
        </p>
      </div>
      
      <div class="level-content">

        <div class="recommend-item" v-for='(book, index) of recommendBooks ' :key='index'>
          <div class="book-img">
            <img :src="book.imgUrl" :alt="book.name">
          </div>

          <div class="book-info">
            <h4 class="book-name">
              {{book.name}}
            </h4>
            <p class="book-summary">
              {{book.summary}}
            </p>
            <div class="book-sub-info">
              <span class="reading">
                3万人在读    
              </span>
              <span class="score">
                {{book.score}}分
              </span>
            </div>

          </div>
          
        </div>
          
      </div>
      
    </div>
   
       
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';


interface IRecommendBook {
  name: string;
  summary: string;
  imgUrl: string;
  reading: number;
  score: number;
}

interface IMainNavItem {
    path: string;
    icon: string;
    label: string;
}

interface IBanners {
  imgUrl: string;
  path: string;
}

@Component
export default class Home extends Vue {

  searchSummary = '三国演义'
  recommendBooks: Array<IRecommendBook> = [
      {
        name: '切克夫斯基小说全集',
        summary: '短片小说之王的毕生杰作，可以反复重读的经典之作!',
        imgUrl: 'http://img.hb.aicdn.com/978c72e4a50393a7ae0f609c12ade0505ea4a79e19e02d-UmzWBJ_fw658',
        reading: 30000,
        score: 9.5
      },
      {
        name: '切克夫斯基小说全集',
        summary: '短片小说之王的毕生杰作，可以反复重读的经典之作!',
        imgUrl: 'http://img.hb.aicdn.com/978c72e4a50393a7ae0f609c12ade0505ea4a79e19e02d-UmzWBJ_fw658',
        reading: 30000,
        score: 9.5
      }
  ]
  
  navs: Array<IMainNavItem> = [

    {
      path: '/',
      icon: 'icon-trophy-fill',
      label: '榜单'
    },
    {
      path: '/',
      icon: 'icon-experiment-fill',
      label: '新书'
    },
    {
      path: '/',
      icon: 'icon-gift-fill',
      label: '特价'
    },
    {
      path: '/',
      icon: 'icon-location-fill',
      label: '杂志'
    },
    {
      path: '/',
      icon: 'icon-star-fill',
      label: '书单'
    }
    
  ]

  news = {
    type: 'hot',
    text: '姜文布局“复仇计划”新作《邪不压正》原著小说',
    path: '/'
  }

  get newsType (){
    const typeIcons = {
      hot: 'icon-star-fill'
    }
    type keys = 'hot'; 

    return this.news && this.news.type ? typeIcons[this.news.type as keys] : '';
  }

  banners: Array<IBanners> = [
      {
        imgUrl: 'https://img.mukewang.com/5bc45ce20001976409360316.jpg',
        path: '/'
      },
      {
        imgUrl: 'https://img.mukewang.com/5b682a210001156e09360316.jpg',
        path: '/'
      },
      {
        imgUrl: 'https://img.mukewang.com/5b4c50e1000136fc18720632.jpg',
        path: '/'
      }
  ]

}
</script>
<style lang='less'>
  *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  ul,li{
    list-style: none;
  }
  em {
    font-style: normal;
  }
  

  html,
  body{
      height: 100%;
      background: #efefef;
  }
  body{

  }

  p{
    font-size: 20px;
    line-height: 1.4;
  }

// tools
  .img-box{
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    height: 100%;
    text-align: center;
  }
  .box-shadow-def{
      box-shadow: 0 6px 14px -10px rgba(100, 100, 100, .5);
  }
  .text-lines-overflow(@clamp: 2){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @clamp; 
    overflow: hidden;

  }
  
  @unit: 1px;
  @bgColor: #fff;
  @fontMainColor: #333;
  @fontSecnetColor: #9b9da7;

  .font-fill{
    font-weight: 600;
  }
  .level-title,
  .block-title{
    .font-fill();
    color: @fontMainColor;
  }
  .level-title{
    font-size: 38px;
  }
  .block-title{
    font-size: 24px;
  } 
  


  // home
  .home{
    padding: 20px 26px 0;
  }

  // search-bar
  .search-bar{
    .box-shadow-def();
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    overflow: hidden;
    padding: 10px;
    border-radius: 6px;
    background: @bgColor;
  
    .search{
      color: @fontSecnetColor;
    }
    @iconSize: 32px;
    .icon{
      font-size: @iconSize;
      color: @fontMainColor;
    }
    .menu{
      flex: 0 0 @iconSize;
    }
  }

  // main-nav
  .main-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-bottom: 38px;
  }
  .main-nav-item{
    flex: 1 1;
    text-align: center;
    
    .nav-icon{
      margin-bottom: 20px;
      // color: orange;
      .iconfont{
        font-size: 42px;
      }
    }
    .label{
      .block-title();
    }

    &:nth-child(1){
      .nav-icon{
        color: #ff4a2a;
      }
    }
     &:nth-child(2){
      .nav-icon{
        color: #ffb42a;
      }
    }
     &:nth-child(3){
      .nav-icon{
        color: #2aff9c;
      }
    }
     &:nth-child(4){
      .nav-icon{
        color: #2a53ff;
      }
    }
     &:nth-child(5){
      .nav-icon{
        color: #ff2a95;
      }
    }
    
  }


 // news 
 .news{
   .box-shadow-def();
   margin-bottom: 42px;
   padding: 16px 20px;
   background: @bgColor;
 }
 .news-content{
   display: flex;
   align-items: center;
   font-size: 20px;
   line-height: 26px;
   .type{
     display: inline-block;
     margin-right: 18px;
     color: #b17c64;
   }
   
 }
 
  // banners
  .banners{
    overflow: hidden;
    border-radius: 6px;
    margin: 24px auto 34px;

    &>div{
      height: 100%;
    }
    
  }

  .banners-item{
    .box-shadow-def();
    height: 220*@unit;
    display: flex;
    justify-content: center;
    align-items: center;
    
    img{
      width: auto;
      height: 100%;
    }
  }


  // level
  .level{
    .level-title{
      margin-bottom: 14px;
    }  
    .level-summary{
      color: @fontSecnetColor;
    }
  }

  // recommend books
  .recommend-item{
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    margin-top: 28px;
    height: 164px;
    background: @bgColor;
    
    .book-img{
        @w: 126px;
        .img-box();
        flex: 0 0 @w;
        width: @w;
        
        img{
          width: 100%;
        }
    }

    .book-info{
      padding: 10px 18px 10px;
    }

    .book-name{
      .block-title();
      margin-bottom: 14px;
    }

    .book-summary{
      .text-lines-overflow();
      margin-bottom: 20px;
      color: @fontSecnetColor;
    }

    .reading{
      color: @fontMainColor;
    }
    .score{
      margin-left: 20px;
      color: #ff910c;
    }
  }
  

</style>

